<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>客户阶段管理</title>

  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/khlist/css/common.css">
  <link rel="stylesheet" href="/khlist/css/manager.css">
  <link rel="stylesheet" href="/hyqcss/public.css">
</head>
<style type="text/css"> 
  /*------------分页部分--------------*/
    .pageing-container-h{
      display: flex;
      justify-content: space-between;
      padding: 0px 20px 20px 20px;
    }
    .pageing-content-h{
      line-height: 28px;
    }
    .pageing-content-h a{
      border: 1px solid #e2e2e2;
      padding: 4px 15px;
      color: #333;
      line-height: 28px;
      border-radius: 2px;
    }
   .current{
     background: #1E9FFF !important;
     color: #fff !important;
   }
</style>
<body>

  <div class="layui-tab layui-tab-brief client-manager" lay-filter="" style="margin: 20px;">
    <ul class="layui-tab-title">
      <li class="layui-this">客户属性筛选</li>
      <!-- <li>所在群聊筛选</li> -->
    </ul>
    <div class="layui-tab-content">
      <!-- 客户属性筛选 -->
      <div class="layui-tab-item layui-show">
        <!-- 筛选form -->
        <form class="layui-form client-filter" action="">
          <div class="layui-inline">
            <label class="layui-form-label">搜索客户：</label>
            <div class="layui-input-inline">
              <input type="text" name="price_min" placeholder="请输入要搜索客户" autocomplete="off" class="layui-input" style="padding-right: 24px;">
              <!-- <i class="layui-icon layui-icon-search" style="position: absolute;right: 5px;top: 11px;color: #999;"></i> -->
            </div> 
          </div>
          <input type="hidden" name="is_set" value="1">
          <div class="layui-inline">
            <label class="layui-form-label">按员工搜索：</label>
            <div class="layui-input-inline">
              <input type="text" name="qyuser" placeholder="请输入员工名" autocomplete="off" class="layui-input" style="padding-right: 24px;">
              <!-- <i class="layui-icon layui-icon-search" style="position: absolute;right: 5px;top: 11px;color: #999;"></i> -->
            </div>
          </div>
          <div class="layui-inline">
            <!-- <input type="text" name="price_min" placeholder="请选择标签" autocomplete="off" class="layui-input"> -->
            <!-- <span class="layui-badge-rim filter-tag">核心 <i class="layui-icon layui-icon-close"></i></span> -->
            <label class="layui-form-label">企业标签：</label>
            <div class="layui-input-inline">
               <input type="text" value="" id="checkLable" readonly="" placeholder="请选择标签" autocomplete="off" class="layui-input">
               <input type="hidden" name="tags" id="checkLables">
            </div> 
            <!-- <div class="layui-input-inline">
              <select name="channe1" id="tag">
                <option value=""></option>
                  {loop $etTagArr as $id=>$tag}                  
                  <option value="{$id}">{$tag}</option>
                  {/loop}
              </select>
              <select name="channes" id="tags">
                <option value=""></option>
                  {loop $etTagArr as $id=>$tag}                  
                  <option value="{$id}">{$tag}</option>
                  {/loop}
              </select>
            </div> -->
            <!-- <div class="layui-input-inline">              <div class="tags-filter" style="width: 210px;">
                <div class="tags-filter-content" style="padding-left: 10px;width: 175px;">
                  <span class="placeholder">请选择标签</span>
                </div>
                <i class="layui-icon layui-icon-down" style="color: #ccc;"></i>
              </div>
            </div> -->
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">添加时间：</label>
            <div class="layui-input-inline">
              <input type="text" class="layui-input" name="addTime" id="addTime" placeholder="开始日期 ~ 结束日期" autocomplete="off">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">添加渠道：</label>
            <div class="layui-input-inline">
              <select name="channe2" id="add_way">
                <option value=""></option>
                {loop $addWayArr as $key=>$name}
                <option value="{$key}">{$name}</option>
                {/loop}
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">性别：</label>
            <div class="layui-input-inline">
              <select name="channe3" id="sex">
                <option value="">请选择性别</option>
                <option value="1">男</option>
                <option value="2">女</option>
                <option value="0">未知</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label" >流失状态
              ：</label>
            <div class="layui-input-inline">
              <select name="channe4" id="status">
                <option value="">请选择流失状态</option>
                <option value="1">已流失</option>
                <option value="0">未流失</option>
              </select>
            </div>
          </div>

          <div class="layui-inline">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
              <button class="layui-btn layui-btn-normal" lay-submit lay-filter="">查询</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>

        </form>
        <!-- table -->
        <div class="client-container">
          <div class="flex align-items-center" style="padding: 20px 30px;">
            <div class="flex-1">
              <strong>共{$p->totalnum}个客户</strong>
              <span class="layui-breadcrumb" lay-separator="|" style="margin-left: 20px;">
                <!-- <a href="javascript:;" style="cursor: text;color: #333 !important ;">已选择<span class="client-selected-num">0</span>个客户</a> -->
                <a href="javascript:;" onclick="tongbu_customer()"><i class="layui-icon layui-icon-refresh" style="font-size: 12px;"></i><small>更新数据</small></a>
              </span>
            </div>
            <!-- <div>
              <button type="button" class="layui-btn layui-btn-normal batch-score">批量添加评分</button>
              <button type="button" class="layui-btn layui-btn-normal batch-tag">批量打标签</button>
              <button type="button" class="layui-btn">下载Excel</button>
            </div> -->
          </div>
          <div class="mcheckbox-table" style="padding: 0 16px; overflow: hidden;">
            <table class="layui-table" lay-data="{}" lay-filter="clientTable" lay-skin="line">
              <colgroup>
                  <col>
                  <col>
                  <col>
                  <col>
                  <col width="120">
                  <col>
                  <col>
                  <col>
                  <col>
                  <col width="200">
                </colgroup>
              <thead>
                <tr>
                  <th lay-data="!{checkbox:true}"></th>
                  <th lay-data="!{field:'client'}">全部客户</th>
                  <th lay-data="!{field:'service'}">所属客服</th>
                  <!-- <th lay-data="!{field:'score'}">客户评分</th> -->
                  <th lay-data="!{field:'tag'}">标签</th>
                  <th lay-data="!{field:'sex'}">性别</th>
                  <th lay-data="!{field:'status'}">客户状态</th>
                  <th lay-data="!{field:'time'}">添加时间</th>
                  <th lay-data="!{field:'contactTime'}">上次对话时间</th>
                  <th lay-data="!{field:'channel'}">添加渠道</th>
                  <th lay-data="!{field:'operate'}">操作</th>
                </tr> 
              </thead>
              <tbody>
                {loop $res as $re}
                <tr>
                  <td></td>
                 <td>
                    <div class="flex lm-table-user" style="min-width: 200px;">
                       <img src="{$re['avatar']}" alt="">
                      <div class="flex-1">
                        <p>{$re['name']}
                        {if $re['type'] == 1}
                        <span style="color:#5ec75d;">@微信</span>
                        {else}
                        <span style="color:#5ec75d;">@{$re['corp_name']}</span>
                        {/if}
                        </p >
                        <p>
                          <!-- <span class="layui-badge" style="background: rgba(255, 0, 0, .2);color: red;">红火</span> -->
                          <span class="table-public-label">{if $re['status'] == 0}正常{else}已流失{/if}</span>
                          <span>昵称：{$re['remark']}</span>
                        </p >
                      </div>
                    </div>
                  </td>
                  <td>
                    <span class="layui-badge-rim lm-table-tag">{$re['user']->name}</span>
                  </td>
                  <!-- <td>111</td> -->
                  <td>{loop $re['tags'] as $tag}
                    {if $etTagArr[$tag]}
                     <span class="layui-badge-rim lm-table-tag"> {$etTagArr[$tag]}&nbsp;</span>
                    {/if}
                  {/loop}
                  </td>
                  <td>{if $re['gender'] == 1}男{elseif $re['gender'] == 2}女{else}未知{/if}</td>
                  <td><span class="table-public-label">{if $re['status'] == 0}正常{else}已流失{/if}</span></td>
                  <td>{date('Y-m-d H:i:s',$re['createtime'] )}</td>
                  <td>{$re['time']}</td>
                  <td>{$addWayArr[$re['add_way']]}</td>
                  <td>
                    <a href="javascript:;" class="table-public-btn" onclick="customer_info({$re['id']})">详情</a>
                    <a href="javascript:;" class="table-public-btn" onclick="et_tag_set({$re['id']})">标签设置</a>
                  </td>
                </tr>
                {/loop}
              </tbody>
            </table>
          </div>
          <div class="main-container-h pageing-container-h">
          <div class="pageing-content-h">
               <span>{$p->totalnum}条/{$p->totalpage}页</span>
          </div>
          <ul class="pageing-content-h">{P weidogsadmin}</ul>
          </div>
        </div>
      </div>
      <div class="layui-tab-item">内容2</div>
    </div>
  </div>

  <!-- 评分 -->
  <div id="batchScorePanel" style="display: none;" class="score-panel">
    <div class="flex align-items-center panel-tip">
      <span style="margin-left: 10px;">将给满足条件的客户批量添加评分</span>
    </div>
    <div style="margin: 10px 0;color: #666;">将给客户添加评分，此次添加
      <input type="text" name="score" value="1" required  lay-verify="required" placeholder="分数" autocomplete="off" class="layui-input" style="display: inline-block;width: 50px;">
      <span>分</span>
    </div>
    <div>
      <textarea name="remark" placeholder="请输入添加评分备注" class="layui-textarea"></textarea>
    </div>
    <div style="text-align: right;margin: 20px auto 0;">
      <button onclick="layer.close(layer.index)" class="layui-btn layui-btn-primary">取消</button>
      <button class="layui-btn layui-btn-normal">确定</button>
    </div>
  </div>
  <!-- 打标签 -->
 <!--  <div id="batchTagPanel" style="display: none;">
    <div style="padding: 30px;">
      <div class="flex align-items-center panel-tip" style="margin-bottom: 20px;">
        <span style="margin-left: 10px;">将给选择的客户批量打标签，请选择标签</span>
      </div>
      <p class="tags-panel-title">客户等级</p>
      <div class="flex tags-panel-wrap">
        <span class="tags-panel-item">核心1</span>
        <span class="tags-panel-item">核心2</span>
      </div>
      <p class="tags-panel-title">123456</p>
      <div class="flex tags-panel-wrap">
        <span class="tags-panel-item">核心3</span>
        <span class="tags-panel-item">核心核心核心核心核心核心核心核心核心核心核心核心核心核心核心4</span>
        <span class="tags-panel-item disabled">核心5</span>
        <span class="tags-panel-item">核心6</span>
        <span class="tags-panel-item">核心7</span>
      </div>
      <div style="text-align: right;margin: 20px auto 0;">
        <button onclick="layer.close(layer.index)" class="layui-btn layui-btn-primary">取消</button>
        <button class="layui-btn layui-btn-normal">确定</button>
      </div>
    </div>
  </div> -->
  <!-- 筛选标签 -->
  <!-- <div id="tagsPanel" style="display: none;padding: 20px;">
    <p class="tags-panel-title">客户等级</p>
    <div class="flex tags-panel-wrap">
      <span class="tags-panel-item">核心1</span>
      <span class="tags-panel-item">核心2</span>
    </div>
    <p class="tags-panel-title">123456</p>
    <div class="flex tags-panel-wrap">
      <span class="tags-panel-item on">核心3</span>
      <span class="tags-panel-item">核心核心核心核心核心核心核心核心核心核心核心核心核心核心核心4</span>
      <span class="tags-panel-item disabled">核心5</span>
      <span class="tags-panel-item">核心6</span>
      <span class="tags-panel-item">核心7</span>
    </div>
    <div style="text-align: center;margin: 20px auto 10px;">
      <button class="layui-btn layui-btn-primary layui-btn-sm tags-panel-clear" style="width: 80px;">清空</button>
      <button class="layui-btn layui-btn-normal layui-btn-sm tags-panel-confirm" style="width: 80px;">确定</button>
    </div>
  </div> -->

  <script src="/js/jquery.min.js"></script>
  <script src="/khlist/js/layui.all.js"></script>
  <script src="/khlist/js/common.js"></script>
  <script src="/red/lib/jquery-3.1.0.min.js"></script>
  <script src="/red/lib/layui.js"></script>
  <script src="/js/ajax.js"></script>
<script>
    var selectedClients = {}
    layui.use('table', function(){
      var table = layui.table;
      
      table.on('checkbox(clientTable)', function(obj){
        // console.log(obj.checked); //当前是否选中状态
        // console.log(obj.data); //选中行的相关数据
        // console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
         console.log(obj.data.length);
        if (obj.checked) {
          // selectedClients[obj.data.用户id] = obj.data
          selectedClients['1'] = obj.data
        } else {
          // delete selectedClients[obj.data.用户id]
          delete selectedClients['1']
        }
      })
    })

    $('.batch-score').on('click', function() {
      if (!Object.keys(selectedClients).length) {
        layer.msg('请先选择客户')
      } else {
        layer.open({
          title: ['添加评分', 'font-weight:bold;'],
          type: 1,
          area: '600px',
          shadeClose: true,
          content: $('#batchScorePanel')
        })
      }
    })

    $('.batch-tag').on('click', function() {
      if (!Object.keys(selectedClients).length) {
        layer.msg('请先选择客户')
      } else {
        layer.open({
          title: ['批量打标签', 'font-weight:bold;'],
          type: 1,
          area: '600px',
          shadeClose: true,
          content: $('#batchTagPanel')
        })
      }
    })

    $(document).on('click', '.tags-panel-item', function() {
      if ($(this).hasClass('disabled')) return;
      $(this).toggleClass('on')
    })

    layui.use('laydate', function(){
      var laydate = layui.laydate;

      //日期范围
      laydate.render({ elem: '#addTime' ,range: true })
    })


    // 筛选客户标签
    $('.tags-filter').on('click', function(e) {
      if (e.target.classList.contains('layui-icon-close')) { // 删除
        var $item = $(e.target).parent()
        var value = $item.text()
        $item.remove()
        var $panelTags = $('.tags-panel-item.on')
        for (var i = 0, l = $panelTags.length; i < l; i++) {
          if ($panelTags[i].innerText === value) {
            $($panelTags[i]).removeClass('on')
          }
        }
        if (!$('.filter-tag').length) {
          $('.tags-filter-content').html('<span class="placeholder">请选择标签</span>')
        }
      } else { // 选择标签
        layer.open({
          title: ['企业标签', 'font-weight:bold;'],
          type: 1,
          shadeClose: true,
          content: $('#tagsPanel')
        })
      }
    })
    // $(document).on('click', '.tags-panel-item', function() {
    //   if ($(this).hasClass('disabled')) return;
    //   $(this).toggleClass('on')
    // })
    // 清空
    $('.tags-panel-clear').on('click', function() {
      $('.tags-panel-item').removeClass('on')
      $('.tags-filter-content').html('<span class="placeholder">请选择标签</span>')
      layer.close(layer.index)
    })
    // 确定
    $('.tags-panel-confirm').on('click', function() {
      var $tags = $('.tags-panel-item.on')
      var html = ''
      for (var i = 0, l = $tags.length; i < l; i++) {
        html += '<span class="layui-badge-rim filter-tag">' + $tags[i].innerText + '<i class="layui-icon layui-icon-close"></i></span>'
      }
      if (!html) {
        html += '<span class="placeholder">请选择标签</span>'
      }
      $('.tags-filter-content').html(html)
      layer.close(layer.index)
    })
    function customer_info(id){
      location.href='customer_info-'+id+'.html';
    }
    function et_tag_set(id){
  layer.open({
          type: 2,
          title: '选择标签',
          area: ['70%', '80%'],
          content: 'et_tag_set-'+id+'.html'
      });
}


function tongbu_customer(){
  if(confirm('确定执行同步吗？')){
    myAjaxPost(false, true, 'ceshi.html', '', function (resp) {
        if (resp.status == 'success') {
          tusi(resp.msg);
          setTimeout(function(){
            goto(location.href);
          },500);
        }else{
          alert(resp.msg);
        }
      });
  }
}


$('#checkLable').on('click',function(){
     layer.open({
        type: 2,
        title: '请选择标签',
        shadeClose: true,
        shade: 0.2,
        area: ['700px', '530px'],
        content: 'select_tag.html?id=1'
     }); 
})
</script>

</body>
</html>